<template>
  <view class="container" :style="appThemeStyle">
    <view class="wrapper" v-if="applyList.length">
      <view class="apply" v-for="(item, index) in applyList" :key="index">
        <view class="title">{{ item.name }}</view>
        <view class="list">
          <view
            class="item"
            v-for="(cItem, cIndex) in item.children"
            :key="cIndex"
            @click="handleMenu(cItem)"
          >
            <image :src="$image(`/storeminiapp/${cItem.icon}.png`)"></image>
            <view class="text">{{ cItem.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <Empty v-else tips="未配置菜单权限！"/>
    <!-- 动态TabBar -->
    <TabBar/>
  </view>
</template>

<script>

import store from '@/store'
import Empty from '@/components/empty'
import { cloneObj } from '@/utils/util'
import * as StoreApi from "@/api/store"
import ScanCodeTypeEnum from "@/common/enum/scanCodeType"
import TabBar from "@/components/tabbar"

const couponPage = 'orderpages/coupon/index'

export default {
  name: "index",
  components: {TabBar, Empty },
  data() {
    return {
    }
  },
  computed: {
    menus() {
      return store.getters.menus
    },
    store() {
      return store.getters.store
    },
    businessType() {
      return store.getters.businessType
    },
    applyList() {
      const menus = cloneObj(this.menus)
      const apply = menus.find(val => val.name === '应用')?.children
      if (apply) {
        return this.businessType !== 1 ? apply.filter(item => item.name !== '商品') : apply
      }
      return []
    }
  },
  onLoad() {
  },
  methods: {
    handleMenu(item) {
      if (item.path !== couponPage) return this.$navTo(item.path)
      uni.scanCode({
        success: res => {
          const { result: verifyCode } = res
          StoreApi.scanCode({
            type: ScanCodeTypeEnum.COUPON_VERIFICATION.value,
            scanResult: verifyCode,
            shopId: this.store.id
          }).then(({ data }) => {
            this.$navTo(item.path, { ...data, verifyCode })
          }).catch(({ msg }) => {
            this.$toast(msg ||'未识别到该条码')
          })
        },
        fail: () => {
          this.$toast('未识别到该条码')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .wrapper {

    .apply {
      padding: 24rpx;
      border-radius: 16rpx;
      background: #fff;
      margin-bottom: 16rpx;

      .title {
        font-size: 28rpx;
        font-weight: bold;
      }

      .list {
        display: flex;
        flex-wrap: wrap;

        .item {
          text-align: center;
          font-size: 26rpx;
          margin-right: 18rpx;
          margin-top: 30rpx;
          width: 150rpx;

          &:nth-child(4n) {
            margin-right: 0;
          }

          image {
            width: 64rpx;
            height: 64rpx;
          }

          .text {
            color: #3D4146;
            margin-top: 16rpx;
          }
        }
      }
    }
  }
}
</style>
